<template>
  <div>
    <p class="title">查看banner</p>
    <div>
      <div>
        <p>*位置</p>
        <p>
            <el-select v-model="value1" placeholder="请选择">
          <el-option
            v-for="item in options1"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
            </el-select>
        </p>
      </div>
      <div>
        <p>*类型</p>
        <p>
                <el-select v-model="value2" placeholder="请选择">
          <el-option
            v-for="item in options2"
            :key="item.value2"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
           </el-select>
        </p>
      </div>
      <div>
        <p>*banner名称</p>
        <p class="input">
          <el-input v-model="title" placeholder="请输入内容"></el-input>
        </p>
      </div>
      <div class="Img">
        <div class="uploadImg">
          <el-upload
            class="avatar-uploader"
            action="https://jsonplaceholder.typicode.com/posts/"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>
        <p>建议尺寸300*758</p>
      </div>
      <div>
        <span>状态：</span> &nbsp;&nbsp;&nbsp;&nbsp;
        <el-radio v-model="state" label="1">上架</el-radio>
        <el-radio v-model="state" label="2">下架</el-radio>
      </div>
      <div class="rt">
        <RichText :content="content" />
      </div>
      <div class="btn2">
           <el-button type="primary">取消</el-button>
           <el-button type="primary">保存</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import RichText from "../../components/RichText.vue";
import banner from "@/apis/modules/banner";
export default {
  components: {
    RichText,
  },
  data() {
    return {
      banId : null,
      value1:"",
      value2:"",
      title: "",
      imageUrl: "",
      state: "1",
      content : "",
      options1: [
        {
          value: "1",
          label: "首页-发现",
        },
        {
          value: "2",
          label: "首页-广播",
        },
        {
          value: "3",
          label: "活动",
        },
      ],
      options2: [
        {
          value: "1",
          label: "链接",
        },
        {
          value: "2",
          label: "广播",
        },
        {
          value: "3",
          label: "活动",
        }, {
          value: "4",
          label: "富文本",
        },
      ],
    };
  },
  created() {
    this.banId = this.$route.query.banId;
    this.showBanner()
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    async showBanner() {
      const { code, data, msg } = await banner.showBanner({
        banId : this.banId
      })
      if (code == 200) {
        this.value1 = data.positions;
        this.value2 = data.banType;
        this.title = data.title;
        this.state = data.state;
        this.content = data.contentname;
        this.imageUrl = data.cover;
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.title {
  margin-top: -10px;
  font-size: 14px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.Img {
  display: flex;
  p {
    width: 300px;
    font-size: 14px;
    margin-left: 20px;
    margin-top: 160px;
  }
}
.uploadImg {
  width: 178px;
  height: 178px;
  border: 1px solid #ccc;
}
.rt {
  margin-top: 20px;
}
.input{
    width: 500px;
}
.btn2{
    width: 500px;
    margin: 0 auto;
    margin-top: 20px;
}
</style>
